<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="报名信息填写" />
    <!-- /导航栏 -->


    <van-form @submit="onSubmit" >
      <van-cell-group inset>
        <van-field v-if="!isEdit"
          v-model="user.relationGrexaminerName"
          name="relationGrexaminerName"
          readonly
          label="被替老师"
          required
          placeholder=""
        />
        <van-field
          v-model="user.unit"
          name="userUnit"
          readonly
          label="外派单位"
          placeholder="点击选择外派单位"
        />
        <!--<van-field
          v-model="user.workUnit"
          name="userWorkUnit"
          label="工作单位"
          placeholder="工作单位"
          :rules="[{ required: true, message: '请填写工作单位' }]"
        />-->
       <van-field
          v-model="user.typeName"
          is-link
          readonly
          name="userTypeName"
          label="类别"
          placeholder="点击选择类别"
          @click="typeNameShowPickerClick"
          arrow-direction="down" center
          :rules="[{ required: true, message: '请选择类别' }]"
        />
        <van-popup v-model:show="typeNameShowPicker" position="bottom">
          <van-picker
            value-key="familiesName"
            :columns="typeNameList"
            :default-index="typeNameShowPickerDefaultIndex"
            show-toolbar
            @confirm="onTypeNameConfirm"
            @cancel="typeNameShowPicker = false"
          />
        </van-popup>
        <van-field
          v-model="user.subjectCodeLabel"
          is-link
          readonly
          name="userSubjectCode"
          label="学科"
          placeholder="点击选择学科"
          @click="subjectCodeShowPickerClick"
          arrow-direction="down" center
          :rules="[{ required: true, message: '请选择学科' }]"
        />
        <van-popup v-model:show="subjectCodeShowPicker" position="bottom">
          <van-picker
            value-key="familiesName"
            :columns="subjectCodeList"
            :default-index="subjectCodeShowPickerDefaultIndex"
            show-toolbar
            @confirm="onSubjectCodeConfirm"
            @cancel="subjectCodeShowPicker = false"
          />
        </van-popup>

        <van-cell center title="是否参加过">
          <template #right-icon>
            <van-switch v-model="user.isJoin" active-color="#1989fa" inactive-color="#dcdee0" />
          </template>
        </van-cell>
        <van-field
          v-model="user.examPointName"
          is-link
          name="userExamPointId"
          label="考点"
          placeholder="点击选择考点"
          @click="examPointIdShowPickerClick"
          arrow-direction="down" center
          :rules="[{ required: true, message: '请选择考点' }]"
        />
        <van-popup v-model:show="examPointIdShowPicker" position="bottom">
          <van-picker
            value-key="epName"
            :columns="examPointIdList"
            :default-index="examPointIdShowPickerDefaultIndex"
            show-toolbar
            @confirm="onExamPointIdConfirm"
            @cancel="examPointIdShowPicker = false"
          />
        </van-popup>
        <van-field
          v-model="user.bankCode"
          name="userBankCode"
          label="银行卡号"
          :rules="userFormRules.bankCard"
          placeholder="请输入银行卡号"
        />
        <van-cell-group title="">
          <van-cell :title="bankTitle"  title-style="flex:1"/>
        </van-cell-group>
        <van-field
          v-model="user.openBank"
          name="userOpenBank"
          label="开户行"
          placeholder="请输入开户行"
          :rules="[{ required: true, message: '请输入开户行' }]"
        />
        <van-field
          v-model="user.bankMobile"
          name="userBankMobile"
          label="对应手机号"
          :rules="userFormRules.mobile"
          placeholder="请输入对应手机号"
        />
        <van-textarea
          :value="user.remark"
          label="备注"
          @input="onInput"
          name="userRemark"
        />

      </van-cell-group>

      <van-row gutter="20" style="margin-top:16px">
      <van-col span="3">
       </van-col>
        <van-col span="8">
          <van-button  block type="danger" @click="preStep">
            上一步
          </van-button>
        </van-col>
        <van-col span="2">
       </van-col>
        <van-col span="8">
          <van-button  block type="primary" native-type="submit">
            保存
          </van-button>
          <van-col span="3">
          </van-col>
        </van-col>
      </van-row>
      <van-row gutter="20" style="margin-top:20px" v-if="isForceBtn">
        <van-col span="4">
        </van-col>
        <van-col span="16">
          <van-button  block type="primary" @click="forceSubmit">
            强制提交
          </van-button>
          <van-col span="3">
          </van-col>
        </van-col>
      </van-row>
      <!--<van-row gutter="20" style="margin-top:20px">
         <van-col span="20" style='width:100%;text-align:center'>
            考点说明
        </van-col>
      </van-row>
      <van-row gutter="20" style="margin-top:10px">
         <van-col span="20" style='margin-right:16px;margin-left:16px;width:100%'>
            <p v-html="user.epExplain"></p>
        </van-col>
      </van-row>-->
    </van-form>
    <van-dialog v-model="bankRemarkDialogVisible" :show-confirm-button="confirmBtnVisible" :show-cancel-button="false" :before-close="onBeforeClose">
      <div style="width: 100%; height: 550px; display: flex; flex-direction: column; align-items: left">
      <span style="width: 100%; height: 30px; font-size: 16px; color: #ffffff; font-weight: bold; text-align: center; background-color: #37AAEA;">考点说明</span>
      <p v-html="user.epExplain" style="margin-left:5px;margin-right:5px"></p>
      </div>
    </van-dialog>
    <!-- /登录表单 -->
  </div>
</template>
<script>
import VanTextarea from "../components/VanTextarea";
import { getDicts,getComanynameById,gelectGrFamiliesList,getFamiliesSelectList,
      getExamponitListByFamiliesId,getUserInfoForIdcardandGrantid,updGrExaminerGrant} from "@/api/grantexaminer/grantexaminer";
export default {
  name: 'enroll',
  components: {VanTextarea},
  props: {},
  data () {
    return {
      isEdit:true,
      bankRemarkDialogVisible:false,
      allowClose: true,
      showClose: false,
      confirmBtnVisible: true,
      unitShowPicker:false,
      typeNameShowPicker:false,
      subjectCodeShowPicker:false,
      examPointIdShowPicker:false,
      typeNameShowPickerDefaultIndex:0,
      subjectCodeShowPickerDefaultIndex:0,
      examPointIdShowPickerDefaultIndex:0,
      bankTitle:'支持银行：不限',
      isForce: 0,
      isForceBtn: false,
      loginInfo:{},
      UserGrantInfo:{},
      rpIdCard:'',
      user: {
        unit: '',
        typeId: '',
        typeName: '',
        subjectCode: '',
        subjectCodeLabel: '',
        isJoin: false,
        examPointId: '',
        examPointName: '',
        bankCode: '',
        openBank: '',
        bankMobile: '',
        remark: '',
        epExplain:'',
        examinerId: undefined,
        companyId: undefined,
        isReplace: 'N',
        relationGrexaminerId: undefined,
        relationGrexaminerName: undefined

      },
      unitList:[],
      typeNameList:[],
      subjectCodeList:[],
      examPointIdList:[],
      userFormRules: {
        mobile: [{
          required: true,
          message: '手机号不能为空'
        }, {
          pattern: /^1[3|5|7|8|9]\d{9}$/,
          message: '手机号格式错误'
        }],
        bankCard: [{
          required: true,
          message: '银行卡号为空'
        }, {
          pattern: /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18}|\d{19})$/,
          message: '银行卡号格式错误'
        }]
      }

    }
  },
  computed: {},
  watch: {},
  created () {
    if(localStorage.getItem('userInfo')==''||localStorage.getItem('userInfo')==null)
    {
      this._routeReplace('loginPage');
      return;
    }
    else
    {
      this.loginInfo = JSON.parse(localStorage.getItem('userInfo'));

      this.rpIdCard = localStorage.getItem("rpIdCard")?localStorage.getItem("rpIdCard"):'';

      if(this.rpIdCard!='')
      {
        this.isEdit = false;
      }

      getComanynameById(this.loginInfo.companyId).then(res=>{
          if(res.code===200){
            this.user.unit = res.data.comName
          }
          else{
            this.user.unit = ''
          }
      })
      let paras = {'idcard':this.loginInfo.idcard,'grantId':this.loginInfo.grantId}
      getUserInfoForIdcardandGrantid(paras).then(res=>{
        let firstResCode = res.code;
        if(res.code===200){
            this.UserGrantInfo = res.data;

        }else
        {
          this.UserGrantInfo = paras;
        }
        //当this.rpIdCard不为空时，表示是老师替换
        if(this.rpIdCard=='')
        {
          this.user.typeId = this.UserGrantInfo.type
          this.user.typeName = ''
          this.user.subjectCode = this.UserGrantInfo.subjectCode
          this.user.subjectCodeLabel = ''
          if(this.UserGrantInfo.isJoin==='Y')
          {
            this.user.isJoin = true
          }
          else{
            this.user.isJoin = false
          }
          this.user.examPointId = this.UserGrantInfo.examPointId
          this.user.examPointName = ''
          this.user.bankCode = this.UserGrantInfo.blankCark
          this.user.openBank = this.UserGrantInfo.depositName
          this.user.bankMobile = this.UserGrantInfo.blankPhone
          this.user.remark = this.UserGrantInfo.remark
          this.user.workUnit = this.UserGrantInfo.companyName
          this.user.examinerId = this.UserGrantInfo.examinerId;

          if(!(this.user.examPointId==null||this.user.examPointId==undefined))
          {
            this.bankRemarkDialogVisible = true;
          }

          this.dataInit()
        }else
        {
          
          //如果是替换的，则查一下被替考官的信息
          let paras = {'idcard':this.rpIdCard,'grantId':this.loginInfo.grantId}
          getUserInfoForIdcardandGrantid(paras).then(res=>{
              let rpUserGrantInfo = {};
              if(res.code===200){
                  rpUserGrantInfo = res.data;

              }else
              {
                rpUserGrantInfo = paras;
              }
              //获取被替考官的类别、学科、考点
              this.UserGrantInfo.type = rpUserGrantInfo.type;
              this.UserGrantInfo.subjectCode = rpUserGrantInfo.subjectCode;
              this.UserGrantInfo.examPointId = rpUserGrantInfo.examPointId;
              this.UserGrantInfo.companyName = rpUserGrantInfo.companyName;

              this.user.typeId = this.UserGrantInfo.type
              this.user.typeName = ''
              this.user.subjectCode = this.UserGrantInfo.subjectCode
              this.user.subjectCodeLabel = ''
              if(this.UserGrantInfo.isJoin==='Y')
              {
                this.user.isJoin = true
              }
              else{
                this.user.isJoin = false
              }
              this.user.examPointId = this.UserGrantInfo.examPointId
              this.user.examPointName = ''
              this.user.bankCode = this.UserGrantInfo.blankCark
              this.user.openBank = this.UserGrantInfo.depositName
              this.user.bankMobile = this.UserGrantInfo.blankPhone
              this.user.remark = this.UserGrantInfo.remark
              this.user.workUnit = this.UserGrantInfo.companyName
              this.user.examinerId = this.UserGrantInfo.examinerId;

              this.user.isReplace = 'Y';
              this.user.relationGrexaminerId = rpUserGrantInfo.id;
              this.user.relationGrexaminerName = rpUserGrantInfo.name;

              if(!(this.user.examPointId==null||this.user.examPointId==undefined))
              {
                this.bankRemarkDialogVisible = true;
              }

              this.dataInit()


          });
        }
      })
    }
  },
  mounted () {},
  methods: {
    onBeforeClose(action, done)
    {

      if(this.allowClose)
      {
        return done(true);
      }else
      {
        return done(false);
      }
    },
    typeNameShowPickerClick()
    {
       if(this.isEdit){
         this.typeNameShowPicker = true
       }
    },
    subjectCodeShowPickerClick()
    {
       if(this.isEdit){
         this.subjectCodeShowPicker = true
       }
    },
    examPointIdShowPickerClick()
    {
       if(this.isEdit){
         this.examPointIdShowPicker = true
       }
    },
    dataInit()
    {
        gelectGrFamiliesList({'grantId':this.loginInfo.grantId,'parentId':0}).then(res=>{
            if(res.code===200){
              this.typeNameList = []
              res.data.forEach((item,index)=>{
                this.typeNameList.push({'id':item.id,'familiesName':item.familiesName})
                if(item.id==this.UserGrantInfo.type)
                {
                  this.user.typeId = item.id
                  this.user.typeName = item.familiesName
                  this.typeNameShowPickerDefaultIndex = index
                }
              })
            }
            else{
              this.typeNameList = []
            }

            if(this.UserGrantInfo.type!=''&&this.UserGrantInfo.type!=null)
            {
              //查询小类
              getFamiliesSelectList({'grantId':this.loginInfo.grantId,'parentId':this.UserGrantInfo.type}).then(res=>{
                if(res.code===200){
                    this.subjectCodeList = []
                    res.data.forEach((item,index)=>{
                        this.subjectCodeList.push({'id':item.familiesId,'familiesName':item.familiesName})
                        if(item.familiesId==this.UserGrantInfo.subjectCode)
                        {
                              this.user.subjectCode = item.familiesId
                              this.user.subjectCodeLabel = item.familiesName
                              this.subjectCodeShowPickerDefaultIndex = index
                        }
                    })
                    console.log(this.subjectCodeList,this.UserGrantInfo.subjectCode)
                }else{
                  this.subjectCodeList = []
                }

                if(this.UserGrantInfo.subjectCode!=''&&this.UserGrantInfo.subjectCode!=null)
                {
                  //查询考点
                  getExamponitListByFamiliesId({'grantId':this.loginInfo.grantId,'familiesId':this.UserGrantInfo.subjectCode}).then(res=>{
                    if(res.code===200){
                        this.examPointIdList = []
                        res.data.forEach((item,index)=>{
                            this.examPointIdList.push({'id':item.id,'epName':item.epName,'epExplain':item.epExplain,'bankNameLimit':item.bankNameLimit})
                            if(item.id==this.UserGrantInfo.examPointId)
                            {
                                  this.user.examPointId = item.id
                                  this.user.examPointName = item.epName
                                  this.examPointIdShowPickerDefaultIndex = index
                                  this.user.epExplain = item.epExplain
                                  if(item.bankNameLimit!='')
                                  {
                                    this.bankTitle = '支持银行：'+item.bankNameLimit
                                  }
                                  else{
                                    this.bankTitle = '支持银行：不限'
                                  }
                            }
                        })
                    }else{
                      this.examPointIdList = []
                    }
                  })
                }
              })

            }
        })

    },
    preStep(){
      this._routeReplace('userInfo');
    },
    onUnitConfirm(val) {
      this.unitShowPicker = false
      this.user.unit = val
    },
    async onTypeNameConfirm(val) {

      this.typeNameShowPicker = false
      if(this.user.typeId != val.id)
      {
        this.user.typeId = val.id
        this.user.typeName = val.familiesName
        //查询小类
        const res = await getFamiliesSelectList({'grantId':this.loginInfo.grantId,'parentId': this.user.typeId})
        if(res.code===200){
            this.subjectCodeList = []
            res.data.forEach((item,index)=>{
                this.subjectCodeList.push({'id':item.familiesId,'familiesName':item.familiesName})
            })
            this.subjectCodeShowPickerDefaultIndex = 0
        }else{
          this.subjectCodeList = []
        }
        this.user.subjectCode = 0
        this.user.subjectCodeLabel = ''
        this.examPointIdList = []
        this.user.examPointId = 0
        this.user.examPointName = ''
        this.examPointIdShowPickerDefaultIndex = 0

      }
    },
    async onSubjectCodeConfirm(val) {
      this.subjectCodeShowPicker = false
      if(this.user.subjectCode!=val.id)
      {
          this.user.subjectCode = val.id
          this.user.subjectCodeLabel = val.familiesName
          //查询考点
          const res = await getExamponitListByFamiliesId({'grantId':this.loginInfo.grantId,'familiesId':this.user.subjectCode})
          if(res.code===200){
              this.examPointIdList = []
              res.data.forEach((item,index)=>{
                  this.examPointIdList.push({'id':item.id,'epName':item.epName,'epExplain':item.epExplain,'bankNameLimit':item.bankNameLimit})
              })
          }else{
            this.examPointIdList = []
          }
          if(this.examPointIdList.length > 0)
          {
            this.user.examPointId = this.examPointIdList[0].id;
            this.user.examPointName = this.examPointIdList[0].epName;
            this.user.epExplain = this.examPointIdList[0].epExplain;

            this.examPointIdShowPickerDefaultIndex = 0;
            if(this.examPointIdList[0].bankNameLimit!='')
            {
              this.bankTitle = '支持银行：'+this.examPointIdList[0].bankNameLimit
            }
            else{
              this.bankTitle = '支持银行：不限'
            }
          }
          else
          {
            this.user.examPointId = 0
            this.user.examPointName = ''
            this.user.epExplain = ''
            this.bankTitle = ''
            this.examPointIdShowPickerDefaultIndex = 0
          }
      }
    },
    onExamPointIdConfirm(val) {
      this.examPointIdShowPicker = false
      this.user.examPointId = val.id;
      this.user.examPointName = val.epName;
      this.user.epExplain = val.epExplain
      if(val.bankNameLimit!='')
      {
        this.bankTitle = '支持银行：'+val.bankNameLimit
      }
      else{
        this.bankTitle = '支持银行：不限'
      }
    },
    onInput(val)
    {
      this.user.remark = val;
    },
    forceSubmit(){
      this.isForce = 1;
      this.onSubmit();
    },
    async onSubmit () {
      // 3. 提交表单请求登录
      this.$toast.loading({
        message: '保存中...',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      try {

        this.UserGrantInfo.type = this.user.typeId
        this.UserGrantInfo.subjectCode = this.user.subjectCode
        if(this.user.isJoin)
        {
          this.UserGrantInfo.isJoin = 'Y'
        }else
        {
          this.UserGrantInfo.isJoin = 'N'
        }
        this.UserGrantInfo.examPointId = this.user.examPointId
        this.UserGrantInfo.blankCark = this.user.bankCode
        this.UserGrantInfo.depositName = this.user.openBank
        this.UserGrantInfo.blankPhone = this.user.bankMobile
        this.UserGrantInfo.remark  = this.user.remark
        this.UserGrantInfo.companyName = this.user.unit
        this.UserGrantInfo.companyId = this.loginInfo.companyId;
        this.UserGrantInfo.isForce = this.isForce;

        this.UserGrantInfo.isReplace = this.user.isReplace;
        this.UserGrantInfo.relationGrexaminerId = this.user.relationGrexaminerId;
        this.UserGrantInfo.relationGrexaminerName = this.user.relationGrexaminerName;

        const res = await updGrExaminerGrant(this.UserGrantInfo)
        this.$toast.clear();
        if(res.code===200){
          let that = this;
          swal({
                  title: '提示',
                  text: '报名信息保存成功',
                  icon: "success",
                  button: {
                    text: "确认",
                    closeModal: true
                  }
            }).then(function(isConfirm) {
              that.allowClose = false;
              that.confirmBtnVisible = false;
              that.bankRemarkDialogVisible = true;
            })
            this.isForce=0;
        }else{
          
           swal({
                  title: '提示',
                  text: '报名信息保存失败，'+res.msg,
                  icon: "error",
                  button: {
                    text: "确认",
                    closeModal: true
                  }
            })
            this.isForceBtn =true;
        }
      } catch (err) {
          this.$toast.clear();
           swal({
                  title: '提示',
                  text: '报名信息保存失败，'+err.message,
                  icon: "error",
                  button: {
                    text: "确认",
                    closeModal: true
                  }
            })
            this.isForceBtn =true;

      }
    }

  }
}
</script>
<style scoped lang="less">

.van-cell__title, .van-cell__value {
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 12px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
}
.login-container {
  .toutiao {
    font-size: 37px;
  }
  .send-sms-btn {
    width: 152px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}
</style>
